<template>
  <div class="page-hire-advs">
    <h1 class="recommend-title">顾问推荐</h1>
    <van-swipe :autoplay="3000" v-if="recommendAdviserList.length > 0">
      <van-swipe-item v-for="(item, index) in recommendAdviserList" :key="index" @click.native="readDetail(item)">
        <img v-lazy="item.headimg" />
      </van-swipe-item>
    </van-swipe>
      <ul class="advs-list">
        <li class="item" v-for="item in adviserList" :key="item.id" @click="readDetail(item)">
          <div class="img">
            <img v-lazy="item.headimg" alt="">
            <span class="type">{{item.type === 1 ? '顾问' : '设计师'}}</span>
          </div>
          <div class="txt">
            <h4>{{item.name}} <van-icon name="arrow" /></h4>
            <p>{{item.desc}}</p>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
import { queryAdviserList } from '../../api/adviser'
export default {
  data(){
    return {
      adviserList: [],
      recommendAdviserList: []
    }
  },
  methods: {
    getDataList(){
      queryAdviserList().then(rsp => {
        if(rsp.code === 200 && rsp.data){
          this.adviserList = rsp.data.adviserList
          this.recommendAdviserList = rsp.data.recommendAdviserList
        }
      })
    },

    readDetail(item){
      localStorage.adviserDetail = JSON.stringify(item)
      this.$router.push({name: 'advisersDetail', params: { id: item.id }})
    }
  },
  created(){
    this.getDataList()
  }
}
</script>

<style lang="less">
.page-hire-advs{
  .recommend-title{
    font-size: 18px;
    padding: 10px;
  }
  .van-swipe{
    margin-bottom: 20px;
    .van-swipe-item{
      height: 200px;
      &>img{
        display: block;
        height: 200px;
        margin: 0 auto;
      }
    }
  }
  .advs-list{
    padding: 5px;
    &:after{
      content: "";
      display: table;
      clear: both;
    }
    .item{
      margin-bottom: 10px;
      padding: 5px;
      float: left;
      width: 33.3333%;
      .img{
        position: relative;
        height: 0;
        padding-bottom: 100%;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
        img{
          display: block;
          min-width: 100%;
          min-height: 100%;
        }
        .type{
          position: absolute;
          top: 10px;
          left: 0;
          padding: 4px 6px;
          font-size: 10px;
          background-color: #ebc12b;
        }
      }
      .txt{
        padding: 0 6px 6px;
        border-radius: 0 0 5px 5px;
        overflow: hidden;
        background-color: #fff;
        &>h4{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 30px;
          font-size: 14px;
          padding-right: 10px;
          position: relative;
          .van-icon{
            position: absolute;
            top: 0;
            right: 0;
            line-height: 30px;
            font-size: 11px;
            color: #333;
          }
        }
        &>p{
          height: 40px;
          line-height: 20px;
          font-size: 12px;
          color: #666;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }
}
</style>

